<template>
  <div class="videoPlayback">
    <ul>
      <li v-for="(item,index) in list" :key='index'>
        <div>
            <a @click='playVdo(item.url,item.id,item.v_name)'>
                <p>

                </p>
                <div>
                <h3>
                    <!-- 第{{index+1}}节： -->
                    {{item.v_name}}
                </h3>
                </div>
            </a>
            <!-- <div @click='downVdo(index)'>
                <a :href="item.url" :download="item.v_name">
                <img class="down" src="../../image/icon_download.png" width="25" height="25" alt="">
                </a>
                <img class="downSuccess" src="../../image/icon_download_successful.png" width="25" height="25" alt="" style="display: none">
                <el-progress class="progress" type="circle" :percentage="50" :width='25' :stroke-width='2' style="margin: auto;display: none"></el-progress>
            </div> -->
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/javascript">
export default {
    data() {
      return {
        list: [],
      }
    },
    methods: {
        downVdo(index) {
            $('ul li').eq(index).addClass("active");
            // $('ul li').eq(index).find(".down").css('display','none');
            // $('ul li').eq(index).find(".progress").css('display','block');
            // $('ul li').eq(index).find(".downSuccess").css('display','block');
        },
        //根据课程id查video表
        getVideoByCid() {
            var cid = this.$route.query.id;
            this.$api.get(this.$api.baseURLSchool,"selectdata2/video?cid="+cid,{},r => {
              this.list = r.data.info;
            },err => {
              console.log(err);
            })
        },
        //播放用户选择视频 给父组件传值
        playVdo(url,id,vname) {
            this.$emit('getVdoUrl',url,id,vname);
        }

    },
    created() {
        this.getVideoByCid();
    }
}
</script>
<style scoped>

</style>